<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus®">
  <meta name="Author" content="">
  <meta name="Keywords" content="">
  <meta name="Description" content="">
  <title>Vue.js入门-与jQuery联合使用示例</title>
  <style>
	[v-cloak] {
		display: none;
	}
  </style>
 </head>
 <body>
	<div id="app" v-cloak>
		<p id="result">{{ result }}</p>
		<input type="button" @click="test" value="修改结果"/>
	</div>
 </body>
 <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/vue/2.5.15/vue.min.js"></script>
 <script>
	$(function () {
		vm.show();
	});
 	var vm = new Vue({
		el: '#app',
		data: {
			message: 'Hello, Vue.js！',
			result: '初始结果！'
		},
		methods: {
			show: function() {
				alert(this.message)
			},
			test: function() {
				$("#result").text("修改完成！");
			}
		}
	})
 </script>
</html>
